<template>
  <div class="more-container">

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="活动详情" name="first">
        <el-row>

    <div class="minwidthbox">
            <!-- 手机 -->
            <phonemode class="phonemode" style="margin-left:80px;"></phonemode>


            <div class="limits">
              <el-row v-if="infoData.is_free==0">
                <el-col :span="18">
                  <el-alert title="提示：本功能为付费项目，开通本功能前请仔细阅读功能说明及费用说明。" type="warning" show-icon>
                  </el-alert>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2"><span class="title">活动进度</span></el-col>
                <el-col :span="14">
                  <el-steps :active="infoData.step" space="112px" align-center finish-status="success">
                    <el-step title="未申请"></el-step>
                    <el-step title="审核中"></el-step>
                    <el-step title="待开启"></el-step>
                    <el-step title="已上线"></el-step>
                  </el-steps>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="18">
                  <div class="line"></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="18">
                  <div class="content-text">
                      <p v-for="(item,index) in detail" :class="item.title==1?'overstriking':''" :key='index' v-html="item.text">{{item.text}}</p>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-checkbox v-model="checked">我已认真阅读并知晓本活动详细规则 </el-checkbox>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-button type="primary" :disabled="infoData.step==2 || !checkPermission(['signUpLuckyDrawOperate'])"
                    :class="infoData.step==2?'submitBtn addColorBtn':'submitBtn'" @click="submitRuler">
                    <span v-if="infoData.step==1">立即申请</span>
                    <span v-if="infoData.step==2">审核中</span>
                    <span v-if="infoData.step==3">立即开启</span>
                    <span v-if="infoData.step==4">下线</span>
                  </el-button>
                </el-col>
              </el-row>
            </div>
  </div>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="抽奖记录" name="second" v-if="checkPermission(['signUpLuckyDrawHistory'])">
        <div class="topsearch">
          <el-form ref="elForm" :model="formData" size="small" label-width="100px">
            <el-row>
              <el-col :span="4">
                <el-row>
                  <el-form-item label-width="0" prop="keyword">
                    <el-input v-model="formData.keyword" placeholder="搜索姓名/电话" clearable :style="{ width: '100%' }"></el-input>
                  </el-form-item>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <el-select v-model="formData.status" placeholder="请选择抽奖状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <span style="color: #fff">1</span>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <span style="color: #fff">1</span>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <span style="color: #fff">1</span>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <div class="rightbtn fr">
                    <el-button type="primary" icon="el-icon-search" size="small" @click="searchlist">查询</el-button>
                    <el-button icon="el-icon-refresh-left" size="small" @click="resetform">重置</el-button>
                  </div>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 表格 -->
        <studenttablehead :tabData='listData' @handleSizeChange='handleSizeChange' @handleCurrentChange='handleCurrentChange'
          v-if="issuccess">
          <el-table-column prop="type" label="获得方式" align="center">
          </el-table-column>
          <el-table-column prop="issue_number" label="参与期数" align="center">
          </el-table-column>
          <el-table-column prop="unionLotto" label="抽奖号码" align="center">
          </el-table-column>
          <el-table-column prop="status" label="开奖状态" align="center">
          </el-table-column>
          <el-table-column prop="status" label="中奖状态" align="center">
          </el-table-column>
        </studenttablehead>
      </el-tab-pane>
    </el-tabs>
    <div class="backBtn" @click="backActivity"><img src="../../../assets/schooladmin/back.png" alt=""></div>
  </div>
</template>

<script>
  //按钮权限验证
  import checkPermission from '@/utils/permission'
  import phonemode from './component/phonemode'
  //api
  import {
    recommendconfig,
    edittrylearnconfig,
    couponoption,
    activitysettingRule,
    activitycloseActivity
  } from '@/api/coupon'

  import {
    getactivityread,
    activityapply,
    unionlottohistory
  } from '@/api/activity'
  //学员表格
  import studenttablehead from '@/components/studenthead'
  export default {
    data() {
      return {
        options: [{
            value: -1,
            label: '作废'
          },
          {
            value: 0,
            label: '待开奖'
          },
          {
            value: 1,
            label: '已中奖'
          },
          {
            value: 2,
            label: '未中奖'
          },
        ],
        changeimg: 'gd',
        detaiData: {},
        //右侧手机显示金额
        //tabs切换
        //页码
        page: 1,
        //翻页总数
        total: 10,
        issuccess: false,
        phoenmoney: undefined,
        checked: false,
        money: null,
        typeMoney: null,
        typeMaxMoney: null,
        params: {},
        detail:[],
        formData: {
          keyword: '',
          status: '',
        },
        //tabs切换
        activeName: 'first',
        ptionOne: [{
            label: '报名任何班型',
            value: 1
          },
          {
            label: '首次打开',
            value: 2
          }
        ],
        optionTwo: [{
            label: '报名券（推荐）',
            value: 1
          },
          {
            label: '练车券',
            value: 2
          },
          {
            label: '模拟券',
            value: 3
          },
          {
            label: '考试券',
            value: 4
          },
          {
            label: '陪练券',
            value: 5
          },
          {
            label: '学车券',
            value: 6
          }
        ],
        apply: {},
        infoData: {},
        readId: null,
        listData: {}
      }
    },
    methods: {
      checkPermission,
      searchlist() {
        this.$message({
          type: 'success',
          message: '查询成功!'
        });

        this.getlistData()
      },
      //重置
      resetform() {
        this.$refs['elForm'].resetFields()
        this.getlistData()
      },
      //切换事件
      handleClick(tab, event) {
        this.page = 1
        this.total = 10
        if (tab.name == 'first') {
          this.$nextTick(async () => {
            this.activityread(this.readId)
          })
        } else {
          //获取领取记录
          this.getlistData(this.readId)
        }
      },
      getrule_type(e) {
        console.log(e)
      },
      backActivity() {
        this.$router.go(-1); //返回上一层
      },
      submitRuler() {
        if (!this.checked) {
          this.$message({
            type: 'error',
            message: '请先确认阅读'
          });
          return;
        }
        if (this.infoData.step == 1) {
          this.applyactivity(this.readId)

        } else if (this.infoData.step == 2) {
          this.$message({
            message: '审核中，请耐心等待！'
          });
          return;
        } else if (this.infoData.step == 3) {

          this.goactivitysettingRule()
        } else {
          this.closeActivity()
        }
      },
      //翻页 一页有多少条数据
      handleSizeChange(val) {
        this.total = val
        //获取数据
        this.getlistData()
      },
      //翻页码
      handleCurrentChange(val) {
        this.page = val
        //获取数据
        this.getlistData()
      },
      //获取记录
      async getlistData() {
        let params = {
          page: this.page,
          rows: this.pageTotal,
        }
        if (this.formData.keyword) {
          params.keyword = this.formData.keyword
        }
        if (this.formData.status) {
          params.status = this.formData.status
        }
        let data = await unionlottohistory(params)
        if (data.code == '0000') {
          this.listData = data.data
          this.issuccess = true
        }
        console.log(this.listData)
      },
      //获取规则配置
      async activityread(id) {
        let params = {
          id: id,
          _request: id
        }
        let data = await getactivityread(params)
        if (data.code == '0000') {
          console.log(data)
          this.infoData = data.data
          this.apply = data.data.apply
          this.detail=JSON.parse(data.data.detail)
          this.$bus.emit('detaiData', data.data)
          if (data.data.rule) {
            this.params.rule_friend = data.data.rule.rule_friend
            this.params.rule_friend_rights = data.data.rule.rule_friend_rights
            this.params.rule_referrer = data.data.rule.rule_referrer
            this.params.rule_referrer_rights = data.data.rule.rule_referrer_rights
          }
        }
      }, //切换事件

      //活动设置
      async goactivitysettingRule() {
        let params = this.params
        params.apply_id = this.apply.id
        params._request = this.readId
        let data = await activitysettingRule(params)
        if (data.code == '0000') {
          this.$message({
            type: 'success',
            message: data.msg
          });
          this.activityread(this.readId)
        }

      },
      //关闭活动
      async closeActivity() {

        let data = await activitycloseActivity({
          apply_id: this.apply.id,
          _request: this.readId
        })
        if (data.code == '0000') {
          this.$message({
            type: 'success',
            message: '下线成功'
          });
          this.activityread(this.readId)
        }

      },
      //申请活动
      applyactivity(id) {
        this.$confirm('您确认发起申请活动吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let params = {
            id,
            _request: id
          }
          let data = await activityapply(params)
          if (data.code == '0000') {
            this.$message.success('发起活动成功！')
            //刷新列表
            this.activityread(this.readId)
          }
        }).catch(() => {

        });
      },

    },
    components: {
      phonemode,
      studenttablehead
    },
    created() {
      //获取规则配置数据
      this.readId = this.$route.query.id
      this.$nextTick(async () => {
        this.activityread(this.readId)
      })

    },
      watch:{
      'infoData.step':function(val){
          if(val==4){
              this.checked=true;
          }else{
            this.checked=false;
          }
      }
    },
    mounted() {



    }
  }
</script>

<style scoped lang="scss">
  ::v-deep {
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }

    .el-tabs__header {
      left: 55px;
    }

    .el-alert {
      margin-bottom: 2rem;
    }

    .el-checkbox {
      margin-top: 2rem;
    }

    .el-select {
      margin: 0 0.5rem;
    }

    .el-tabs__nav-wrap::after {
      height: 1px;
    }

    .el-checkbox {
      margin-bottom: 15px;
    }

    .el-tabs__item {
      font-size: 16px;
    }

    .el-tabs__item.is-active {
      font-weight: bold;
    }

    .ruleradio {
      .el-radio {
        display: block;
        display: flex;
        align-items: center;
        margin: 20px 0;

        .el-input {
          margin: 0 5px;
        }

        .el-input__inner {
          padding: 0 5px;
          text-align: center;
        }

        &:last-child {
          margin-bottom: 0;
        }

        &:first-child {
          margin-top: 8px;
        }
      }
    }

    .el-step__head.is-success {
      border-color: #3388FF;
      color: #fff;

      .el-step__icon {
        background-color: #3388FF;
        color: #fff;
      }
    }

    .el-step__title.is-success {
      color: #323233
    }

    .el-step__head.is-process {
      color: #c0c4cc;
      border-color: #c0c4cc;

    }

    .el-step__title {
      font-size: 14px;
      color: #323233;
    }

    .el-step__title.is-process {
      font-weight: normal;
    }

  }

  .limits {
    margin-top: 20px;
    margin-bottom: 20px;

    .title {
      font-size: 16px;
      font-weight: bold;
    }

    .content-text {
      margin: 40px auto 0;

      .overstriking {
        font-weight: bold;
        font-size: 16px;
        color: #323233;
             padding: 10px 0 5px 0;
      }

      ul {
        li {
          text-align: justify;
          font-size: 13px;
          color: #666;
          line-height: 20px;
          margin-bottom: 10px;
          line-height: 32px;
        }
      }
    }
  }

  .submitBtn {
    margin-top: 1.5rem;
  }

  .addColorBtn {
    background-color: #ff7c24;
    border: 1px solid #ff8d3c;
  }

  .line {
    height: 1px;
    background-color: #707070;
    margin-top: 30px;
  }

  .more-container {
    position: relative;
  }

  .backBtn {
    position: absolute;
    left: 20px;
    top: 19px;
    background-color: #fff;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #e4e7ed;
    padding-right: 35px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    img {
      width: 20px;
      height: 20px;
    }
  }
   .minwidthbox{
   display: flex;
   .limits{
     flex-grow: 1;
     margin-left: 40px;
     min-width:840px ;
   }
  }
</style>
